<template>
  <div class="box">
    <div class="box__inner" >
      <div class="scan-code" >
        <div class="vam" style="margin-bottom:0; margin-left: 140px;">
          <!-- 14是字与图片的距离 -->
          <span class="txt" style="width:130px;">&nbsp&nbsp问卷链接与二维码</span>
        </div>
        <div class="wjxui-linkqr">
          <dl class="allImg" style="display: inline-block;">
            <dd>
              <img
                src="https://qr.wjx.cn/handler/qrcode.ashx?chl=https%3a%2f%2fks.wjx.top%2fvm%2fe6mv8c5.aspx&amp;chs=120x120&amp;nar=1&amp;sign=6985978132b973b452849bbba4068b254642156b"
                class="rqImg" alt="二维码" width="140" height="140" >
            </dd>
          </dl>
          <div class="linkBox" style="width: 640px;display: inline-block; margin-left: 50px;" >
            <!-- 链接，复制，打开框 -->
            <div class="linkBox_inner" style="position: relative;">
              <span class="wjxui-textInput">
<!--                 生成的链接-->
                <input name="ctl02$ContentPlaceHolder1$txtLink" type="text"  id="ctl02_ContentPlaceHolder1_txtLink"
                  class="link" style="width: 410px; height:34px;background:#F5F5F5; padding-left: 20px;" v-model="this.linknumber">
<!--                <div class="link">-->
<!--                    {{linknumber}}sagf-->
<!--                </div>-->
                <!-- 复制按钮 -->
                 <el-button type="bblue" @click="copy()">复制{{b}}</el-button>

                 <!-- <a-input type="text" value="这是内容" class=“input”></a-input>
                 <a-button size="small" @click="copyText">复制</a-button> -->

              </span>
              <!-- 打开按钮 -->
                 <el-button type="bblue" @click="openToAnswer">打开</el-button>
            </div>
            <div class="linkBox_btn_wrap" style="display: inline-block; margin-left: 45px;">
              <el-button type="bblue"  class="goon"><i class="el-icon-picture"></i>&nbsp制作海报</el-button>
              <el-button type="bblue"  class="goon"><i class="el-icon-message"></i>微信发送</el-button>
              <el-button type="bblue"  class="goan"><i class="el-icon-share"></i>分享链接</el-button>
            </div>
          </div>
        </div>
        <div id="divCopyMsg" style="color: red; font-size: 14px;width:120px;padding-left:10px;" class="pull-left"></div>
      </div>
    </div>
  </div>

</template>


<script>//lang="ts" setup
    // import { ref } from 'vue'
    // const currentDate = ref(new Date());
    export default {
      data() {
        return {//`${window.location.href}(${this.$route.query.id})`,
          linknumber: window.location.href,
          a:"tfgg",
          id: ""
        };
      },
      created() {
        var id = this.$route.query.id;
        this.id = id;
        this.linknumber = "http://"+window.location.host+"/#/previewQuestionnaire?id=" + id;
        // this.linknumber = "http://localhost:8088/#/previewQuestionnaire?id=" + id
      },
      methods: {
         copy(link){
          var input = document.getElementById('ctl02_ContentPlaceHolder1_txtLink')
          //选中input标签
          input.select()
          //执行复制
          document.execCommand('copy')

           
         },
         openToAnswer(){
            window.open(this.linknumber, '_blank');
         }
      }
    };
</script>


<style>
.inside-wrapper .inside-main .inside-box .box-items .box {
  width: 100%;
  margin: 0px 0px 20px 0px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgb(217 217 217);
  border-radius: 2px;
}
.vam .txt{
  height: 30px;
  line-height: 30px;
  font-weight: 600;
}
.vam {
   margin-bottom: 0;
   height: 30px;
}

.rqImg {
  box-shadow: 0 0 4px 0 #5d5b5b;
  position: relative;
  margin-left: 177px;
}

.allImg {
  position: relative;
  float: left;
}

.wjxui-linkqr .linkBox {
  float: left;
  margin-left: 10px;
}

.wjxui-linkqr .linkBox_inner {
  margin: 6px 0 16px;
}

.wjxui-textInput .afterSpan {
  border-radius: 0 2px 2px 0;
  border: 1px solid #d9d9d9;
  border-left: 0;
}

.wjxui-textInput .beforeSpan,
.wjxui-textInput .afterSpan {
  padding: 0 4px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  color: #595959;
  text-align: center;
  background: #f5f5f5;
  box-sizing: content-box;
}

.wjxui-btn-primary {
  background: #fff;
  border: 1px solid #e8e8e8;
  color: #262626 !important;
  line-height: 31px;
}

/* 复制按钮，打开按钮 */
 .el-button--bblue {
    color: rgb(255, 255, 255);
    background-color: rgb(158, 175, 186);
    border-color: rgb(148, 197, 238);
  }
.linkBox_btn_wrap{
  margin-top: 20px;
}
/* 制作海报，微信发送 */
.goon{
    color: rgb(148, 197, 238);
    background-color: rgb(240, 248, 255);
    border-color: rgb(148, 197, 238);
    margin-right: 20px ;
}
/* 分享 */
.goan{

    color: rgb(148, 197, 238);
    background-color: rgb(240, 248, 255);
    border-color: rgb(148, 197, 238);
}
/* 问卷设置，生成企业专属链接 */
.txt {
  margin: auto;
  height: 70px;
  padding-bottom: 10px;
  font-size: 16px;
  padding-left: 35px;
}



</style>
